<template>
  <view class="container">
		<nav-ber :title="'学习专区'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="u-search-flex">
			<u-search placeholder="搜索视频、文档名称" v-model="keyword" :showAction="false" shape="round"></u-search>
			<u-icon class="chat_left" name="chat" color="#2979ff"></u-icon>
		</view>
		<view style="padding: 0 20rpx;box-sizing: border-box;">
			<u-subsection  @change="sectionChange" :list="list" mode="subsection" :current="current"></u-subsection>
		</view>
		<view style="margin-top: 100rpx;" v-if="!resourceLists.length">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<view class="province" v-if="current == 1">
			<view class="items_box" v-for="(item, index) in resourceLists" :key="index" @click.stop="goTovixFun(item)">
				<view class="font_w">
					<span>{{ item.name }}</span>
				</view>
				<view class="time_flex">
					<view>
						<view class="mar_20">已阅读：{{ item.readSum || 0 }}</view>
						<view>创建时间{{ item.createTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="province" v-if="current == 0">
			<view class="items_box" v-for="(item, index) in resourceLists" :key="index" @click.stop="goTovixFun(item)">
				<view class="img_flex">
					<view style="width: 260rpx;height: 150rpx;">
						<image style="width: 260rpx;height: 150rpx;" src="../../../static/order/status/wait_receipt.png" mode="aspectFit"></image>
					</view>
					<view>
						<view class="font_w">
							<span>{{ item.name }}</span>
						</view>
						<view class="time_flex">
							<view>
								<view class="mar_20">已阅读：{{  item.readSum || 0 }}</view>
								<view>创建时间{{ item.createTime }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
  </view>
</template>
<script>
	import { resourceList, resourceRead } from '@/api/task.js'
  export default {
    data() {
			return {
				resourceLists: [],
				keyword: '',
				ispro: '1',
				list: ['视频专区', '文档专区'],
				current: 0
			}
    },
		onShow() {
			this.resourceListFun()
		},
		mounted() {
			
		},
		methods: {
			resourceListFun() {
				this.resourceLists = []
				resourceList({
					orderByColumn: 'seq',
					status: 3,
					type: this.current == 1? 0 : 1,
					pageNum: 1,
					pageSize: 1000,
				}).then((res) => {
					this.resourceLists = res.rows
				})
			},
			goTovixFun(item) {
				if(this.current == 0){
					uni.navigateTo({
						url: "/pages/task/videoPlay/index?id=" + item.id
					})
				} else {
					resourceRead(item.id).then()
					if (item.url.split('.')[item.url.split('.').length-1] == 'pdf') {
						uni.navigateTo({
							url: '/pages/pdfLook/index?url=' + item.url
						})
					} else {
						uni.previewImage({
								current: 0,
								urls: [item.url],
						})
					}
				}
			},
			proFun(val) {
				this.ispro = val
			},
			sectionChange(index) {
				this.current = index;
				this.resourceListFun()
			},
			goToRequestFun(type) {
				uni.navigateTo({
					url:type == 1? "/pages/task/research/index" : "/pages/task/taskRequest/index"
				})
			},
		}
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.pro_list {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}
	.pro_list_is {
		background-color: #f7f8ff;
		color: #2979ff;
		position: relative;
	}
	.pro_list_is::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 50rpx;
		background-color: #2979ff;
		position: absolute;
		left: -20rpx;
	}
	.u-search-flex {
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.addr_font {
		color: gray;
		font-size: 25rpx;
		margin: 0 10rpx;
		margin-right: 20rpx;
	}
	.chat_left {
		margin-left: 20rpx;
	}
	.items_box {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.time_flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: gray;
			.mar_20 {
				margin: 15rpx 0;
			}
		}
		.font_w {
			font-weight: 900;
			color: #111;
		}
		.button_color {
			background-color: #2979ff;
			color: #fff;
			padding: 15rpx 40rpx;
			box-sizing: border-box;
			border-radius: 100rpx;
		}
	}
	.img_flex {
		display: flex;
		align-items: center;
	}
</style>
